<template>
  <view class="container">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <view class="nav-title">我的优惠券</view>
      <view class="nav-right"></view>
    </view>

    <!-- 优惠券统计 -->
    <view class="coupon-stats">
      <view class="stats-item">
        <text class="stats-num">3</text>
        <text class="stats-label">可用</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">1</text>
        <text class="stats-label">已使用</text>
      </view>
      <view class="stats-item">
        <text class="stats-num">2</text>
        <text class="stats-label">已过期</text>
      </view>
    </view>

    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <!-- 可用优惠券 -->
      <view class="coupon-item available">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">20</text>
          </view>
          <view class="coupon-condition">满100元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">新用户专享券</view>
          <view class="coupon-desc">适用于全场商品</view>
          <view class="coupon-time">有效期至：2024-12-31</view>
          <view class="coupon-status available-status">可使用</view>
        </view>
      </view>

      <view class="coupon-item available">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">50</text>
          </view>
          <view class="coupon-condition">满200元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">生日特惠券</view>
          <view class="coupon-desc">仅限生日月使用</view>
          <view class="coupon-time">有效期至：2024-11-30</view>
          <view class="coupon-status available-status">可使用</view>
        </view>
      </view>

      <view class="coupon-item available">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">10</text>
          </view>
          <view class="coupon-condition">满50元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">周末购物券</view>
          <view class="coupon-desc">周末专享优惠</view>
          <view class="coupon-time">有效期至：2024-10-31</view>
          <view class="coupon-status available-status">可使用</view>
        </view>
      </view>

      <!-- 已使用优惠券 -->
      <view class="coupon-item used">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">30</text>
          </view>
          <view class="coupon-condition">满150元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">首单优惠券</view>
          <view class="coupon-desc">新用户首次购买</view>
          <view class="coupon-time">使用时间：2024-09-15</view>
          <view class="coupon-status used-status">已使用</view>
        </view>
      </view>

      <!-- 已过期优惠券 -->
      <view class="coupon-item expired">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">15</text>
          </view>
          <view class="coupon-condition">满80元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">夏季清仓券</view>
          <view class="coupon-desc">夏季商品专用</view>
          <view class="coupon-time">过期时间：2024-08-31</view>
          <view class="coupon-status expired-status">已过期</view>
        </view>
      </view>

      <view class="coupon-item expired">
        <view class="coupon-left">
          <view class="coupon-amount">
            <text class="currency">¥</text>
            <text class="amount">25</text>
          </view>
          <view class="coupon-condition">满120元可用</view>
        </view>
        <view class="coupon-right">
          <view class="coupon-title">会员专享券</view>
          <view class="coupon-desc">会员等级优惠</view>
          <view class="coupon-time">过期时间：2024-07-31</view>
          <view class="coupon-status expired-status">已过期</view>
        </view>
      </view>
    </view>

    <!-- 获取更多优惠券 -->
    <view class="get-more-section">
      <button class="get-more-btn">
        <uni-icons type="gift" size="20" color="#fff"></uni-icons>
        <text>获取更多优惠券</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const statusBarHeight = ref(0);

// 获取状态栏高度
const getStatusBarHeight = () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 0;
  } catch (e) {
    statusBarHeight.value = 0;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  getStatusBarHeight();
});
</script>

<style>
.container {
  background-color: #FFF9F2;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #FFE6CC;
}

.nav-left, .nav-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.coupon-stats {
  display: flex;
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx 0;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.2);
}

.stats-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.stats-num {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.coupon-list {
  padding: 0 20rpx;
}

.coupon-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.coupon-item.available {
  border-left: 6rpx solid #FF8C42;
}

.coupon-item.used {
  border-left: 6rpx solid #999;
  opacity: 0.7;
}

.coupon-item.expired {
  border-left: 6rpx solid #ccc;
  opacity: 0.5;
}

.coupon-left {
  width: 200rpx;
  background: linear-gradient(135deg, #FF8C42, #FF9F1C);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
}

.coupon-item.used .coupon-left,
.coupon-item.expired .coupon-left {
  background: linear-gradient(135deg, #999, #bbb);
}

.coupon-left::after {
  content: '';
  position: absolute;
  right: -10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 20rpx;
  height: 20rpx;
  background-color: #FFF9F2;
  border-radius: 50%;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.currency {
  font-size: 24rpx;
  margin-right: 4rpx;
}

.amount {
  font-size: 48rpx;
  font-weight: bold;
}

.coupon-condition {
  font-size: 20rpx;
  opacity: 0.9;
}

.coupon-right {
  flex: 1;
  padding: 30rpx;
  position: relative;
}

.coupon-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.coupon-desc {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.coupon-time {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.coupon-status {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
}

.available-status {
  background-color: #E8F5E8;
  color: #4CAF50;
}

.used-status {
  background-color: #F0F0F0;
  color: #999;
}

.expired-status {
  background-color: #FFE6E6;
  color: #F44336;
}

.get-more-section {
  padding: 30rpx 20rpx;
}

.get-more-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(to right, #FF8C42, #FF9F1C);
  color: #fff;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}

.get-more-btn text {
  margin-left: 10rpx;
}
</style>